<template>
<div>
  <div style="padding: 20px">
    <div class="opt-area-02">
      <div class="left-con">
        <div class="input-frame" style="width: 164px" v-if="severUserInfo.company_grade!=='5'">
          <Select placeholder="请选择区" :disabled="Adisabled" v-model="params.area_id" style="width:164px" clearable @on-change="findDistrictList(3,params.area_id)" @on-clear="clearMsg(3)">
            <Option v-for="item in List1" :value="item.id" :key="item.id">{{ item.name }}</Option>
          </Select>
        </div>
        <div class="input-frame" style="width: 164px" v-if="severUserInfo.company_grade!=='5'">
          <Select placeholder="请选择街道" :disabled="Bdisabled" v-model="params.street_id" style="width:164px" clearable @on-change="findDistrictList(4,params.street_id)" @on-clear="clearMsg(4)">
            <Option v-for="item in List2" :value="item.id" :key="item.id">{{ item.name }}</Option>
          </Select>
        </div>
        <div class="input-frame" style="width: 164px" v-if="severUserInfo.company_grade!=='5'">
          <Select placeholder="请选择社区" v-model="params.community_id" style="width:164px" clearable @on-change="findGridGradenList(params.community_id)">
            <Option v-for="item in List3" :value="item.id" :key="item.id">{{ item.name }}</Option>
          </Select>
        </div>
        <div class="input-frame" style="width: 164px">
          <Select placeholder="请选择网格" v-model="params.garden_id" style="width:164px" clearable @on-clear="clearGrid(6)">
            <Option v-for="item in GridGradenList" :value="item.id" :key="item.id">{{ item.name }}</Option>
          </Select>
        </div>
        <Button type="info" size="small" style="margin-top: 5px;margin-right:5px" @click="findDoorplateUserNumList">搜索</Button>
        <Button type="success" size="small" style="margin-top: 5px;margin-right:5px" @click="exportModal = true">导出</Button>
      </div>
    </div>
    <div style="font-size: 12px;margin-bottom: 10px">
      注：仅可查看每个网格中每户人数，层级选择请选择到网格，点击搜索
    </div>
    <template>
      <Table border :columns="tableColumns" :data="tableData" :loading="tableLoading">
        <template slot-scope="{ row }" slot="name">
          <strong>{{ row.name }}</strong>
        </template>
        <template slot-scope="{ row, index }" slot="action">
          <Button v-if="row.remarks === undefined" size="small" type="success" @click="clickButton(row)">填写备注</Button>
          <Button v-else size="small" type="primary" @click="clickButton(row)">查看备注</Button>
        </template>
      </Table>
    </template>
  </div>
  <Modal
    v-model="exportModal"
    title="导出"
    @on-ok="exportModalOk">
    导出数据时间点截止当日凌晨2点，点击确认下载！
  </Modal>
  <Modal
    v-model="clickRemarksModal"
    title="添加备注"
    @on-ok="clickRemarksModalOk">
    <template>
      <Input v-model="clickRemarksMsg" placeholder="请填写备注" style="width: 300px" />
    </template>
  </Modal>
</div>
</template>

<script>
import {
  addDoorplateRemarks, downLoadExcel,
  // downLoadExcel,
  // downLoadExcel,
  // downLoadExcel,
  findAllGridList,
  findDoorplateUserNumList,
  findSubordinateList
} from '../../../api/eventlist'

export default {
  name: 'index',
  data () {
    return {
      tableLoading: false,
      tableColumns: [
        {
          title: '网格',
          key: 'garden_name',
          align: 'center'
        },
        {
          title: '楼',
          key: 'building_name',
          align: 'center'
        },
        {
          title: '单元',
          key: 'unit_name',
          align: 'center'
        },
        {
          title: '层',
          key: 'floor_name',
          align: 'center'
        },
        {
          title: '户',
          key: 'doorplate_name',
          align: 'center'
        },
        {
          title: '人数',
          key: 'num',
          align: 'center'
        },
        {
          title: '操作',
          slot: 'action',
          width: 150,
          align: 'center'
        }
      ],
      tableData: [],
      severUserInfo: {},
      Adisabled: false,
      Bdisabled: false,
      params: {},
      List1: [],
      List2: [],
      List3: [],
      GridGradenList: [],
      clickRemarksModal: false,
      exportModal: false,
      clickRemarksMsg: '',
      row: {}
    }
  },
  methods: {
    findDoorplateUserNumList () {
      let data = {
        garden_id: this.params.garden_id
      }
      this.tableLoading = true
      findDoorplateUserNumList(data).then(ret => {
        if (ret.data.errcode === 0) {
          this.tableData = ret.data.data
          this.tableLoading = false
        } else {
          this.$Notice.error({ title: '查询失败！', desc: ret.data.errmsg })
        }
      })
    },
    findDistrictList (e1, e2) {
      let data = {
        grade: e1,
        id: e2
      }
      findSubordinateList(data).then(ret => {
        if (ret.data.errcode === 0) {
          if (e1 === 2) {
            this.List1 = ret.data.data
          } else if (e1 === 3) {
            this.List2 = ret.data.data
          } else if (e1 === 4) {
            this.List3 = ret.data.data
          }
        } else {
          this.$Notice.error({
            title: '查询失败',
            desc: ret.data.errmsg
          })
        }
      })
    },
    clearMsg (e1) {
      if (e1 === 3) {
        this.params.area_id = ''
        this.params.street_id = ''
        this.params.community_id = ''
      } else if (e1 === 4) {
        this.params.street_id = ''
        this.params.community_id = ''
      }
    },
    clearGrid (e) {
      if (e === 6) {
        this.params.garden_id = ''
        this.params.building_id = ''
        this.params.unit_id = ''
        this.params.floor_id = ''
        this.params.doorplate_id = ''
      } else if (e === 7) {
        this.params.building_id = ''
        this.params.unit_id = ''
        this.params.floor_id = ''
        this.params.doorplate_id = ''
      } else if (e === 8) {
        this.params.unit_id = ''
        this.params.floor_id = ''
        this.params.doorplate_id = ''
      } else if (e === 9) {
        this.params.floor_id = ''
        this.params.doorplate_id = ''
      } else if (e === 10) {
        this.params.doorplate_id = ''
      }
    },
    findGridGradenList (e) {
      let data = {
        grade: '5',
        id: e
      }
      findAllGridList(data).then(ret => {
        if (ret.data.errcode === 0) {
          this.GridGradenList = ret.data.data
        } else {
          this.$Notice.error({ title: '获取失败', desc: ret.data.errmsg })
        }
      })
    },
    clickRemarksModalOk () {
      let data = {
        doorplate_id: this.row.doorplate_id,
        remarks: this.clickRemarksMsg
      }
      addDoorplateRemarks(data).then(ret => {
        if (ret.data.errcode === 0) {
          this.$Notice.success({ title: '保存成功！', desc: ret.data.errmsg })
          this.clickRemarksMsg = ''
          this.findDoorplateUserNumList()
        } else {
          this.$Notice.error({ title: '保存失败！', desc: ret.data.errmsg })
        }
      })
    },
    clickButton (e) {
      this.row = e
      this.clickRemarksMsg = e.remarks
      this.clickRemarksModal = true
    },
    exportModalOk () {
      let params = {
        fileName: this.severUserInfo.company_name
      }
      downLoadExcel(params).then(ret => {
        console.log(ret)
        const aLink = document.createElement('a')
        let blob = new Blob([ret.data], { type: 'application/vnd.ms-excel' })
        aLink.href = URL.createObjectURL(blob)
        aLink.setAttribute('download', '表名' + '.xlsx') // 设置下载文件名称
        aLink.click()
      })
      var domain = document.domain
      console.log(domain)
      let ip = ''
      if (domain === 'localhost') {
        ip = 'http://localhost:8080'
      } else {
        ip = 'http://qstb.mzj.shenyang.gov.cn/'
      }
      let url = ip + '/api/ac/grid/exportGridService/downLoadExcel?fileName=' + params.fileName
      console.log(url)
      window.open(url)
      window.close()
    }
  },
  mounted () {
    this.severUserInfo = this.$store.state.user.severUserInfo
  },
  watch: {
    'severUserInfo.company_grade' (val) {
      if (val === '2') {
        this.findDistrictList(2, '999999999')
      } else if (val === '3') {
        this.findDistrictList(2, '999999999')
        this.params.area_id = this.severUserInfo.company_id
        this.findDistrictList(3, this.params.area_id)
        this.Adisabled = true
      } else if (val === '4') {
        this.findDistrictList(2, '999999999')
        this.params.area_id = this.severUserInfo.parent_id
        this.findDistrictList(3, this.params.area_id)
        this.params.street_id = this.severUserInfo.company_id
        this.findDistrictList(4, this.params.street_id)
        this.Adisabled = true
        this.Bdisabled = true
      } else if (val === '5') {
        this.findGridGradenList(this.severUserInfo.company_id)
      }
    }
  }
}
</script>

<style scoped>
.page_style {
  margin: 20px 5px;
}

.input-frame {
  width: 120px;
  margin-right: 10px;
  float: left;
}

.house-list > .group {
  background: white;
  padding: 10px;
  margin-top: 10px;
}

.house-list > .group > .item {
  border-bottom: 1px solid #f5f5f5;
  padding: 10px 0;
}

.house-list > .group > .item .top {
  display: flex;
  justify-content: space-between;
  margin-bottom: 5px;
}

.house-list > .group > .item .title {
  font-size: 14px;
  color: #333333;
}

.house-list > .group > .item .address {
  font-size: 12px;
  color: gray;
  display: flex;
  align-items: center;
}

.house-list > .group > .item .detail {
  font-size: 12px;
  color: dodgerblue;
}

.opt-area-02 {
  display: flex;
  align-items: center;
  flex-direction: column;
  border: 1px solid #abdcff;
  background-color: #f0faff;
  padding: 8px 16px 8px 16px;
  border-radius: 4px;
  margin-bottom: 10px;
}

.opt-area-02 .right-con {
  width: 100%;
  margin-top: 5px;
  display: flex;
}
/*.left-con{*/
/*  padding-top: 20px;*/
/*  padding-left: 20px;*/
/*}*/
.opt-area-02 .left-con {
  font-size: 14px;
  width: 100%;
}

.opt-area-02 .left-con span {
  font-weight: bold;
}

.opt-area-02 .right-con input {
  width: 150px;
  margin-right: 10px;
}

.opt-area-02 .right-con .input-frame {
  width: 200px;
  margin-right: 10px;
}

.table-action-btn {
  margin-bottom: 3px;
}

.container >>> .ivu-btn-small {
  height: 24px;
  padding: 0 5px;
  font-size: 12px;
  border-radius: 3px;
}

.btn-action {
  margin-bottom: 10px;
}

.mp10 {
  margin-right: 10px;
}
.title-style {
  color: red;
}
.mb20 {
  margin-bottom: 20px;
}
.ivu-table-row {
  height: 57px;
}
.demo-spin-icon-load{
  animation: ani-demo-spin 1s linear infinite;
}
@keyframes ani-demo-spin {
  from { transform: rotate(0deg);}
  50%  { transform: rotate(180deg);}
  to   { transform: rotate(360deg);}
}
.demo-spin-col{
  height: 100px;
  position: relative;
  /*border: 1px solid #eee;*/
}
.container>>>.ivu-icon-ios-arrow-forward:before{
  color: black;
}
</style>
